<script setup>
import { onMounted, ref, watch } from 'vue'
import OverviewCard from '@/components/OverviewCard.vue'
import InputSearch from '@/components/InputSearch.vue'
import { getTreatmentList } from '@/api/treatment'
import { useStatusStore } from '../../../stores'

const treatmentRecords = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
// 查询条件
const searchQuery = ref('')

onMounted(async () => {
  handleSearchClick()
})

const handleSearchClick = async () => {
  const data = await getTreatmentList({
    name: searchQuery.value,
    pageNumber: currentPage.value,
    pageSize: pageSize.value
  })
  treatmentRecords.value = data.data.records.map((item) => {
    return {
      patientName: item.name,
      treatmentTime: item.treatmentTime,
      doctorName: item.doctorName,
      diagnosis: item.diagnosis,
      deptName: item.deptName,
      treatmentPlan: item.treatmentPlan
    }
  })
  console.log(data)
}

const handlePageQuery = async () => {
  handleSearchClick()
}

const statusStore = useStatusStore()
watch(
  () => statusStore.componentKey,
  async () => {
    handleSearchClick()
  }
)
</script>

<template>
  <div class="treatment-query">
    <header class="header">
      <h2>治疗查询</h2>
      <input-search
        v-model="searchQuery"
        class="search-input"
        @search-click="handleSearchClick"
        text="搜索患者姓名"
      ></input-search>
    </header>

    <div class="treatment-list">
      <overview-card v-if="treatmentRecords.length === 0" class="no-records">
        <p>没有找到相关治疗记录。</p>
      </overview-card>

      <overview-card
        v-else
        class="record"
        v-for="(record, index) in treatmentRecords"
        :key="index"
      >
        <div class="record-header">
          <span class="patient-name">{{ record.patientName }}</span>
          <span class="treatment-time">{{ record.treatmentTime }}</span>
        </div>
        <div class="record-body">
          <p><strong>主治医生：</strong> {{ record.doctorName }}</p>
          <p><strong>科室：</strong> {{ record.deptName }}</p>
          <p><strong>诊断：</strong> {{ record.diagnosis }}</p>
          <p><strong>治疗方案：</strong> {{ record.treatmentPlan }}</p>
        </div>
      </overview-card>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 50, 100, 500]"
        :size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="treatmentRecords.length"
        @size-change="handlePageQuery"
        @current-change="handlePageQuery"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/assets/scss/abstracts/variables' as *;
@use '@/assets/scss/abstracts/mixins' as *;

.treatment-query {
  padding: 2rem;

  .header {
    @include flexSpaceBetweenCenter;
    margin-bottom: 1.5rem;
    min-height: 5rem;

    .search-input {
      // margin-right: 2px;
      // margin-right: 20rem;
    }
  }

  .treatment-list {
    .record {
      margin-bottom: 2rem;
      border-radius: 0.8rem;

      .record-header {
        @include flexSpaceBetweenCenter;
        margin-bottom: 1rem;

        .patient-name {
          font-size: 1.6rem;
          font-weight: 600;
          color: $color-primary-dark;
        }

        .treatment-time {
          font-size: 1.1rem;
          color: $color-grey-1;
        }
      }

      .record-body {
        p {
          margin: 0.5rem 0;
          color: $color-black;
          font-size: 1.2rem;
        }
      }
    }

    .no-records {
      text-align: center;
      font-size: 1.2rem;
      color: $color-grey-1;
      margin-bottom: 2rem;
    }

    .el-pagination {
      justify-self: center;
    }
  }
}
</style>
